<!DOCTYPE HTML>
<html>
<head>
<title>zxb test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<!-- css files -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<!-- /css files -->
<!-- font files -->
<link href='http://fonts.useso.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- /font files -->
<!-- js files -->
<script src="js/modernizr.custom.js"></script>

<script>

	//请求后台示例
	function postDemo() {
		console.log("test");

		$.ajax({
			url: "test/demo",
			type: "post",
			data: {},
			dataType: "json",
			success: function (data) {
				console.log(data);
				alert(data.message)
			},
			error: function (e) {
				console.log("出错了:" , e);
			}
		});
	}

</script>
<!-- /js files -->
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<div class="navbar-wrapper">
    <div class="container">
		<nav class="navbar navbar-inverse navbar-static-top cl-effect-20">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="index.html">test</a>


					<div class="navbar-brand"  onclick="postDemo()">testClick</div>
				</div>
				<div id="navbar" class="navbar-collapse collapse navbar-right">
					<!--<ul class="nav navbar-nav">-->
						<!--<li><a href="#"><span data-hover="Home">Home</span></a></li>-->
						<!--<li><a href="#"><span data-hover="About">Smile</span></a></li>-->
						<!--<li><a href="#"><span data-hover="Services">Happy</span></a></li>-->
					<!--</ul>-->
				</div>
			</div>
        </nav>
    </div>
</div>
<!-- Banner Section -->
<!-- Carousel
    ================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
		<div class="item active">
			<img class="first-slide" src="images/banner/banner1.jpg" alt="First slide">
		</div>
        <div class="item ">
			<img class="second-slide" src="images/banner/banner2.jpg" alt="Second slide">
        </div>
        <div class="item ">
			<img class="third-slide" src="images/banner/banner3.jpg" alt="Third slide">
        </div>
        <div class="item ">
			<img class="four-slide" src="images/banner/banner4.jpg" alt="Four slide">
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div><!-- /.carousel -->
<!-- /Banner Section -->

<!-- poem Section -->
<section class="our-services slideanim" id="poem">
	<h3 class="text-center slideanim">念奴娇 赤壁怀古</h3>
	<p class="text-center slideanim">[宋] 苏轼</p>
	<div id="features">
		<div class="container">
			<div class="col-md-12 col-md-offset-4">
				<div class="col-md-6 centered">
					<!-- ACCORDION -->
					<div class="accordion ac" id="accordion2">
						<div class="accordion-group">
							<div class="accordion-heading">
								<a class="accordion-toggle slideanim" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">大江东去，浪淘尽，千古风流人物。</a>
							</div><!-- /accordion-heading -->
						</div><!-- /accordion-group -->
						<div class="accordion-group">
							<div class="accordion-heading">
								<a class="accordion-toggle slideanim" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">故垒西边，人道是，三国周郎赤壁。</a>
							</div>
						</div><!-- /accordion-group -->
						<div class="accordion-group">
							<div class="accordion-heading">
								<a class="accordion-toggle slideanim" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">乱石穿空，惊涛拍岸，卷起千堆雪。</a>
							</div>
						</div><!-- /accordion-group -->
						<div class="accordion-group">
							<div class="accordion-heading">
								<a class="accordion-toggle slideanim" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">江山如画，一时多少豪杰。</a>
							</div>
							<div id="collapseFour" class="accordion-body collapse">
								<div class="accordion-inner slideanim">
									<p></p>
								</div><!-- /accordion-inner -->
							</div><!-- /collapse -->
						</div><!-- /accordion-group -->


						<div class="accordion-group">
							<div class="accordion-heading">
								<a class="accordion-toggle slideanim" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">遥想公瑾当年，小乔初嫁了，雄姿英发。</a>
							</div><!-- /accordion-heading -->
						</div><!-- /accordion-group -->
						<div class="accordion-group">
							<div class="accordion-heading">
								<a class="accordion-toggle slideanim" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">羽扇纶巾，谈笑间，樯橹灰飞烟灭。</a>
							</div>
						</div><!-- /accordion-group -->
						<div class="accordion-group">
							<div class="accordion-heading">
								<a class="accordion-toggle slideanim" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">故国神游，多情应笑我，早生华发。</a>
							</div>
						</div><!-- /accordion-group -->
						<div class="accordion-group">
							<div class="accordion-heading">
								<a class="accordion-toggle slideanim" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">人生如梦，一尊还酹江月。</a>
							</div>
							<!--<div id="collapseFour" class="accordion-body collapse">-->
								<!--<div class="accordion-inner slideanim">-->
									<!--<p></p>-->
								<!--</div>&lt;!&ndash; /accordion-inner &ndash;&gt;-->
							<!--</div>&lt;!&ndash; /collapse &ndash;&gt;-->
						</div><!-- /accordion-group -->

					</div><!-- Accordion -->
				</div>
			</div>
		</div><!--/ .container -->
	</div><!--/ #features -->
</section>










<!-- poem Section -->
<!--<section class="our-events slideanim" id="poem1">-->
	<!--<div class="container">-->

	<!--</div>-->
<!--</section>-->













<section class="footer">
	<div class="copyright">
	</div>
</section>
<!-- /Footer Section -->
<!-- Back To Top -->
<a href="#0" class="cd-top">Top</a>
<!-- /Back To Top -->

<!-- js files -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<!-- js for gallery -->
<script src="js/darkbox.js"></script>
<!-- /js for gallery -->
<!-- js for back to top -->
<script src="js/main.js"></script>
<!-- /js for back to top -->
<!-- js for nav-smooth scroll -->
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {

  // Store hash
  var hash = this.hash;

  // Using jQuery's animate() method to add smooth page scroll
  // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 900, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
    });
  });
})
</script>
<!-- /js for nav-smooth scroll -->
<!-- js for slide animations -->
<script>
$(window).scroll(function() {
  $(".slideanim").each(function(){
    var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slide");
    }
  });
});
</script>
<!-- /js for slide animations -->
<!-- /js files -->
</body>
</html>
